import React from 'react'
import {
  StyleSheet,
  SafeAreaView,
  View
} from 'react-native'
import { connect } from "react-redux"
import { Button, Input, Text } from 'react-native-elements'
// other
// import storage from '~/storage'
import { rxLogin } from '../../utils/api'

class Component extends React.Component {
  constructor (props) {
    super(props),

    this.state = {
      // 提交按钮状态
      BtnLoading: false
    }
  }

  onLogin() {
    const { navigation } = this.props

    // 设置提交按钮状态
    this.setState({ BtnLoading: true })

    setTimeout(() => {
      rxLogin({
        "code":"haomeili",
        "password": "123000"
      }).then((response) => {
        if (response.errno == 0 && response.token != null) {
          navigation.navigate('HomeNavigator')
        }

        // 显示错误信息并恢复提交按钮状态
        this.setState({ BtnLoading: false })
      })
    }, 200)
  }

  render() {
    let { BtnLoading } = this.state

    return (
      <SafeAreaView>
        <View style={styles.logo}>
          <Text h2>闲&nbsp;趣</Text>
        </View>

        <View style={styles.form}>
          <Input label="输入手机号或者账号" />
          <Input label="输入密码" secureTextEntry={true} />

          <Button style={{marginTop: 10}}
            loading={ BtnLoading }
            title="登&nbsp;陆"
            onPress={ () => this.onLogin() }
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  logo: {
    marginTop: 100,
    alignItems: 'center',
  },
  form: {
    marginTop: 80,
    paddingHorizontal: 10,
  }
})

// mapStateToProps
function mapStateToProps(state) {
  return {
    token: state.token
  }
}

// mapDispatchToProps
function mapDispatchToProps(dispatch) {
  return {
    setToken: (token) => dispatch({type: 'SET_TOKEN', token: token})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)
